<template>
	<component :is="tag" :style="iconStyle" :class="iconClass"></component>
</template>

<script setup>
	
	import { computed } from 'vue';

	const props = defineProps({
		tag: {
			type: String,
			default: 'i'
		},
		prefix: {
			type: String,
			default: 'lulu_iconfont__'
		},
		icon: String,
		size: [String, Number],
		loading: Boolean
	})

	const iconClass = computed(() => {
		const cls = ['ui-icon', `${props.prefix}${props.icon}`];
		(/^loading/.test(props.icon) || props.loading) && cls.push('ui-icon_loading');
		return cls;
	})

	const iconStyle = computed(() => {
		const sty = {
			fontSize: props.size && `${props.size}px`
		};
		return sty;
	})
	
</script>

<style lang="scss" scoped>
	
	@import '@/theme/material/animate.scss';
	
	.ui-icon {
		display: inline-block;
		font-family: "lulu_iconfont"!important;
		font-style: unset;
		font-weight: 400;
		line-height: 1;
		text-transform: none;
		speak: none;
		vertical-align: baseline;
	}

	.ui-icon_loading {
		@include animateAttr;
		@include animateLoading;
	}
	
</style>
